﻿@model MVCDemo.ViewModel.SayViewModel

@{
    ViewBag.Title = "Index";
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="~/Content/bootstrap.min.css">
    @*<link rel="stylesheet" href="../static/css/home.css">*@
    <link rel="shortcut icon" href="../static/images/cup.ico">
</head>

<body>
    <!-- 具体样式 -->
    <div class="container">
        <div class="row">
            <div class="col-sm"></div>
            <div class="col-sm">
                <div class="card" style="width: 50rem;">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-sm-4 d-flex justify-content-start">
                                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
                                        data-target="#saysomething">
                                    发表说说
                                </button>
                            </div>
                            <div class="col-sm-4 d-flex justify-content-center">
                                <img src="../static/images/头像.jpg" alt="" width="40px" height="40px"
                                     style="border-radius: 50px;">
                                <h6 style="margin-top: 8px;">当前用户：@Model.Username</h6>
                            </div>
                            <div class="col-sm-4 d-flex justify-content-end">
                                <button type="button"
                                        class="btn btn-secondary btn-lg" data-toggle="modal"
                                        data-target="#sign-up">
                                    注销
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm"></div>
        </div>

        <div class="row">
            <div class="col-sm">
            </div>
            <div class="col-sm" id="saysaymsg">
                @foreach(var msg = Model.MessageViewModels)
                {

                }
                <div class="card border-primary shadow" style="width: 50rem;">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-sm-10">{{msg.msgUserName}} ：{{msg.content}} ——{{msg.createtime}}</div>
                            <div class="col-sm-2">
                                <button type="button" class="btn btn-outline-success"
                                        data-toggle="modal" data-target="#comment"
                                        onclick="sayComment('{{msg.id}}')">
                                    评论一下
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush" id="{{msg.id}}">
                            {% for comment in msg.comments %}
                            <li class="list-group-item" style="background:rgba(246, 246, 247, 0.295);">
                                <blockquote class="blockquote mb-0">
                                    <p>{{comment.content}}</p>——{{comment.createtime}}
                                    <footer class="blockquote-footer">
                                        <cite title="Source Title">{{comment.comUserName}}</cite>&nbsp;&nbsp;对
                                        <cite title="Source Title">{{msg.msgUserName}}</cite>&nbsp;&nbsp;说
                                    </footer>
                                </blockquote>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                {% endfor %}
            </div>
            <div class="col-sm">
            </div>
        </div>
    </div>

    <!-- 发表说说  -->
    <div class="modal fade" id="saysomething" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">发表说说</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">请发言：</span>
                            </div>
                            <textarea class="form-control" aria-label="With textarea" id="sayMsg"
                                      name="sayMsg"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                            onclick="cancleSay()">
                        取消
                    </button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="say()">发表</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 评论一下 -->
    <div class="modal fade" id="comment" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">评论一下</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">小嘴叭啦一下：</span>
                            </div>
                            <textarea class="form-control" aria-label="With textarea" id="commentMsg"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                            onclick="cancelCom()">
                        取消
                    </button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="comment()">评论</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 是否确认注销 -->
    <div class="modal" tabindex="-1" id="sign-up">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">确定注销？</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>真的要走吗，呜呜呜！</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">不确定</button>
                    <button type="button" class="btn btn-primary" onclick="logout()">确认</button>
                </div>
            </div>
        </div>
    </div>

    <script src="~/Scripts/jquery-3.6.0.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

    <!-- 运行逻辑 -->
    <script>
        // 确认注销
        function logout() {
            axios({
                method: 'post',
                url: '/logout'
            }).then(function (response) {
                // 接收返回的数据
                let res = response.data;
                console.log(response);
                if (res.code === 200) {
                    // 注销成功跳转至登录注册页
                    window.location.href = '/';
                }
            }).catch((err) => {
                alert(err);
            });
        }

        // 保存当前说说的id
        let currentMsgId = '';
        function sayComment(msgId) {
            currentMsgId = msgId;
        }
        // 发布说说
        function say() {
            axios({
                method: 'post',
                url: '/say',
                data: {
                    sayMsg: $('#sayMsg').val()
                }
            }).then(function (response) {
                let res = response.data;
                if (res.code === 200) {
                    // 根据服务返回的信息，拿到说说的信息，借助模板引擎，渲染这一段dom
                    let data = JSON.parse(res.data);

                    let html = `
                <div class="card border-primary shadow" style="width: 50rem;">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-sm-10">{{username}} ：${data.content}——${data.createtime}</div>
                            <div class="col-sm-2"><button type="button" class="btn btn-outline-success"
                                    data-toggle="modal" data-target="#comment"
                                    onclick="sayComment(${data.id})">评论一下</button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush" id="${data.id}"></ul>
                        </div>
                    `;
                    // 将渲染好的这段dom，插入到指定id节点的内部最前面
                    $("#saysaymsg").prepend(html);
                }
            }).catch(err => {
                alert(err);
            });
            //发布成功后清空文本框
            $('#sayMsg').val('');
        }
        //取消发布
        function cancleSay() {
            $('#sayMsg').val('');
        }
        //取消评论
        function cancelCom() {
            $('#commentMsg').val('');
        }
        // 评论一下
        function comment() {
            axios({
                method: 'post',
                url: '/comment',
                data: {
                    commentMsg: $('#commentMsg').val(),
                    msgId: currentMsgId
                },
            }).then(function (response) {
                let res = response.data;
                if (res.code === 200) {
                    // 获得评论信息，渲染指定的dom片段
                    let data = JSON.parse( res.data);
                    let html = `
                    <li class="list-group-item" style="background:rgba(246, 246, 247, 0.295);">
                        <blockquote class="blockquote mb-0">
                            <p>${data.content}</p>——${data.createtime}
                            <footer class="blockquote-footer">
                                <cite title="Source Title">${data.fromUserName}</cite>&nbsp;&nbsp;对
                                <cite title="Source Title">${data.toUserName}</cite>&nbsp;&nbsp;说
                            </footer>
                        </blockquote>
                    </li>
                    `;
                    // 将渲染好的dom片段，插入到指定id节点的最后面
                    $("#" + data.msgId).append(html);
                } else {
                    alert('错误')
                }
            }).catch(err => {
                // alert(err);
            });
            //评论成功后清除文本框
            $('#commentMsg').val('');
        }
    </script>
</body>

</html>